<template>
	<view class="preview">

		<!-- #ifndef H5 -->
		<tn-nav-bar fixed :alpha="true">{{title}}</tn-nav-bar>
		<!-- #endif -->

		<swiper :style="{paddingTop: vuex_custom_bar_height + 'px'}" @change="swiperChange" class="swiper" circular
			:indicator-dots="false" :autoplay="false" :interval="2000" :duration="500">
			<swiper-item v-for="(item, index) in list" :key="item.id">
				<scroll-view :scroll-y="true" class="test22"
					:style="{height: '100vh',paddingBottom:vuex_custom_bar_height + 'px'}">

					<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
					<view class="button-container">
						
						<view class="button" @tap="deawingBtn(index)">
							<text class="tn-icon-theme button-icon tn-text-xxl"></text>
							<view>
								<text>制作同款</text>
							</view>
						</view>
						
						<view class="button" @tap="copyBtn(index)">
							<text class="tn-icon-copy button-icon tn-text-xxl"></text>
							<view>
								<text>复制提示词</text>
							</view>
						</view>
						<view class="button" @tap="copyBtn(index,true)">
							<text class="tn-icon-copy button-icon tn-text-xxl"></text>
							<view>
								<text>复制反向词</text>
							</view>
						</view>
						
						<view class="button" @tap="downBtn(index)">
							<text class="tn-icon-download-simple button-icon tn-text-xxl"></text>
							<view>
								<text>下载</text>
							</view>
						</view>
					</view>


					<view class="boy-container">
						<view class="tag-group">
							<view class="tag-item tn-bg-aquablue" @click="openModel(item.model_hash)">
								<text class="tn-icon-at-sign">{{item.model_name}}</text>
							</view>
							<view class="tag-item" v-for="(item_clip) in item.clip_tag_zh" :key="item_clip.name">
								<text>{{item_clip.text}}</text>
							</view>

							<view class="tag-item" v-for="(item_deepbooru) in item.deepbooru_tag_zh"
								:key="item_deepbooru.name">
								<text>{{item_deepbooru.text}}</text>
							</view>
						</view>
						<text>{{item.story}}</text>
					</view>
				</scroll-view>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.$tn.http.post('/api/atlas/preview', {
				id: e.id
			}).then(res => {
				// console.log('res', res);
				this.pushList(res)
			}).catch(err => {
				console.error('err', err)
				uni.showModal({
					content: 'X_X',
				})
			});
		},
		data() {
			return {
				title: 'Loading...',
				index: 0,
				list: [],
			}
		},

		methods: {
			openModel(hash, type = 'model') {
				uni.navigateTo({
					url: '/pages/moyi/Model?hash=' + hash + '&type=' + type,
				})
			},
			swiperChange(e) {
				this.index = e.detail.current;
				this.setTitle(this.list[e.detail.current].title)
			},
			setTitle(title) {
				this.title = title
				uni.setNavigationBarTitle({
					title: title
				});
			},
			pushList(res) {
				if (res.length) {
					this.setTitle(res[0].title)
					this.list = res
				}
			},
			downBtn(index) {
				// #ifdef H5
				var oA = document.createElement("a");
				oA.download = this.list[index].title; // 设置下载的文件名，默认是'下载'
				oA.href = this.list[index].url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove();
				// #endif

				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.list[index].url,
					success: function() {
						uni.showToast({
							title: '保存成功',
						})
						console.log('save success');
					}
				});
				// #endif
			},
			deawingBtn(index){
				this.$tn.http.post('/api/atlas/taskInfo', {
					id: this.list[index].id
				}).then(res => {
					uni.setStorage({
						key: 'img_'+this.list[index].id,
						data: res,
						success:  ()=> {
							uni.navigateTo({
								url: '/pages/moyi/Drawing?id='+this.list[index].id,
							})
						}
					});	
				}).catch(err => {
					console.error('err', err)
					uni.showModal({
						content: 'X_X',
					})
				});
							
			},
			copyBtn(index, negative = false) {
				uni.setClipboardData({
					data: this.list[this.index][negative ? 'negative_prompt' : 'prompt'],
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.boy-container {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.tag-group {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		margin-bottom: 10rpx;

		.tag-item {
			margin: 10rpx 10rpx 10rpx 0;
			color: #dddddd;
			border: 1rpx solid #F8F7F8;
			padding: 4rpx 14rpx 6rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
		}

	}

	.button-container {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.button {
		color: white;
		flex-basis: calc(100% / 1);
		text-align: center;
		padding: 10rpx;

		&:not(:last-child) {
			border-right: 1px solid #333;
		}

		&-icon {}
	}

	.preview {
		background-color: black;
		color: white;
		min-height: 100vh;
	}

	.swiper {
		min-height: 100vh;
	}

	.swiper-item {
		/* min-height: 100%; */
	}
</style>